<template>
  <view class="container">
    <!-- 提示信息 -->
    <view class="message">
      目前随心改仅支持微信支付，后续更多优惠支付随后将更新，随心改会为用户带来储值卡活动，让改衣服更优惠
    </view>
	<!-- 提示信息 -->
	<view class="shunfeng">
	  如果您有任何问题可以电话联系 177-1060-3595，北京随心改®️ 竭诚为您服务
	</view>

    <view class="card">
      <button @tap="payOrder" class="pay-button">
        <img src="@/static/icons/wechat_pay.png" alt="微信支付 Logo" class="button-icon" />
        点击微信支付
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue'
	import { baseURL } from "@/api/request"
	import { onLoad } from '@dcloudio/uni-app'
	import { setAuthorization } from "@/utils/auth"
	
	const userId = uni.getStorageSync("userId")
	
	let pay = reactive({
		config: {
			goodsIds: [1, 4],
			openid: uni.getStorageSync('openid'),
			orderExplain: '',
			orderSn: '',
			serviceType: 1,
			storeId: 1,
			totalAmount: 0,
			userAddress: '北京三里屯',
			userId: userId
		}
	})
	
	onLoad((option) => {
		pay.config.orderSn = option.orderNumber
		pay.config.totalAmount = parseFloat(option.totalAmount); // 总金额
		// const userAddress = JSON.parse(decodeURIComponent(option.userAddress)); // 收货地址
		// 更新 pay.config 中的 userAddress
		pay.config.userAddress = userAddress.userAddress;
		uni.login({
			"provider": "weixin",
			"onlyAuthorize": true, // 微信登录仅请求授权认证
			success: async function (event) {
				const { code } = event
				let appid = 'wx2bdadf69adb00259'
				let secret = '488956d21d2929dfacb185843a0e9c69'
				//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
				wx.request({
					url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' + secret + '&grant_type=authorization_code&js_code=' + code,
					header: {
						'content-type': 'application/json'
					},
					success: function (result) {
						if (result.statusCode === 200) {
							result
							uni.setStorageSync('openid', result.data.data.openid);
							uni.setStorageSync('session_key', result.data.session_key);
						}
					}
				})
			},
			fail: async function (event) {
				// 打印登录失败信息
				console.error('登录失败信息:', event);
				uni.showToast({
					title: '授权失败!',
					icon: 'error',
					duration: 1000,
					mask: true
				})
			}
		});
	})
	
	const payOrder = () => {
		uni.request({
			url: 'https://sxg123.cn/ignore/pay/prepay',
			method: 'POST',
			data: { ...pay.config, 'openid': uni.getStorageSync('openId'), 'orderExplain': '高端定制改西服'},
			success(res) {
				const { nonceStr, packageValue: page, signType, paySign, timeStamp } = (res.data as any).data
				uni.requestPayment({
				    provider: 'wxpay', // 支付服务提供商，如 'wxpay'、'alipay'
				    orderInfo: {}, // 由支付服务提供商返回的支付信息
					timeStamp,
					nonceStr,
					package: page,
					signType,
					paySign,
				    success: function (res) {
				        console.log('支付成功', res);
				    },
				    fail: function (err) {
				        console.log('支付失败', err);
				    },
				    complete: function () {
				        console.log('支付流程完成');
				    }
				});
			}
		})
	}
</script>

<style scoped>
	.container {
	  padding: 20px;
	}
	.message {
	  text-align: center;
	  margin-bottom: 30px; /* 与卡片之间的间距 */
	  font-size: 16px;
	  color: #555;
	}
	.shunfeng {
	  text-align: center;
	  margin-bottom: 30px; /* 与卡片之间的间距 */
	  font-size: 16px;
	  color: #555;
	}
	.card {
	  width: 100%;
	  background-color: #fff;
	  padding: 15px;
	  border-radius: 10px;
	  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}
	.card-content {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	}
	.icon-text {
	  display: flex;
	  align-items: center;
	}
	.wechat-logo {
	  width: 30px;
	  height: auto;
	  margin-right: 10px; /* 图标和文字之间的间距 */
	}
	.wechat-text {
	  font-size: 16px;
	  color: #333;
	}
	.pay-button {
	  width: 100%;
	  height: 45px;
	  background-color: #1aad19; /* 微信支付绿色 */
	  color: white;
	  font-size: 18px;
	  border-radius: 5px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  gap: 10px; /* 图标和文字之间的间距 */
	  /* 移除固定定位，使按钮位于卡片内部 */
	  position: static;
	}
	.button-icon {
	  width: 20px;
	  height: auto;
	}
</style>